@import "./common.scss";

.content{
  .flash{
    background-color: #8bc01f;
    padding-bottom: 60px;
    .container{
      .row{
        display: flex;
        .flash-wrapper{
          display: flex;
          margin-top: 67px;
          .left-content{
            
            .flash-one{
              display: flex;
              .flag{
                width: 55px;
                height: 55px;
                background-color: #fff;
                text-align: center;
                font-size: 48px;
                line-height: 55px;
                color: #8bc01f;
              }
              span{
                margin-left: 12px;
                font-size: 48px;
                line-height: 55px;
                color: #ffffff;
              }
            }
            .flash-text{
              padding-left: 15px;
              color: #ffffff;
              h2{
                margin-bottom: 67px;
                font-size: 24px;
              }
              p{
                margin: 0;
                margin-bottom: 32px;
              }
              button{
                width: 100px;
                height: 34px;
                background-color: #ffffff;
                font-size: 14px;
                border: transparent;
                outline: transparent;
                border-radius: 5px;
                color:#8bc01f ;
              }
            }
            
          }
            .right-img{
              img{
                width: 100%;
              }
            }
           
        }
      }
    }
  }
  .player{
    background-color: #3393df;
    padding-bottom: 60px;
    .container{
      .row{
        display: flex;
        .player-wrapper{
          // display: flex;
          margin-top: 67px;
          .player-left{
            display: flex;
            flex-direction: column;
            .player-one{
              display: flex;
              margin-bottom: 18px;
              .flag{
                width: 55px;
                height: 55px;
                background-color: #fff;
                text-align: center;
                font-size: 48px;
                line-height: 55px;
                color: #8bc01f;
              }
              span{
                margin-left: 12px;
                font-size: 48px;
                line-height: 55px;
                color: #ffffff;
              }
            }
            .player-img{
              img{
                width: 100%;
              }
            }
            
          }

          .player-text{
            align-items: center;
            color: #ffffff;
            h2{
              font-size: 24px;
              margin-bottom: 18px;
            }
            p{
              margin-bottom: 33px;
            }
          }

          .player-img2{
            padding-top: 228px;
            img{
              width: 100%;
            }
          }
          &:nth-child(2){
            align-self:center;
          }

        }
      }
    }
  }
  .family{
    padding-top: 90px;
    padding-bottom: 85px;
    background-color: #ffffff;
    .container{

      .row{
        .family-wrapper{
          .family-left{
            .family-one{
              display: flex;
              .flag{
                width: 40px;
                height: 40px;
                background-color: #3393df;
                text-align: center;
                font-size: 36px;
                line-height: 40px;
                color: #fff;
              }
              span{
                margin-left: 12px;
                font-size: 36px;
                line-height: 40px;
                color: #3393df;
              }
            }
            .family-text{
              
              
              h2{
                font-size: 18px;
                color: #3393df;
                &:first-child{
                  color:#5d5d5d;
                }
              }
              p{
                color: #5d5d5d;
                font-size: 14px;
                text-indent: 2em;
              }
             

            }
            .family-img{
              text-align: center;
            }
          }
        }
      }
    }
    &:last-child{
      background-color: #f7f7f7;
    }
  }

}



@media screen and (max-width:992px){
  .content{
    .flash{
      .container{
        .row{
          .flash-wrapper{
            &:nth-child(2){
              align-items: center;
            }
          }
        }
      }
    }
    .player{
      .container{
        .row{
          .player-wrapper{
            &:first-child{
              .player-left{
                
                .player-one{
                  .flag{
                    width: 45px;
                    height: 45px;
                    font-size: 32px;
                    line-height: 45px;
                  }
                  span{
                    font-size: 32px;
                  }
                }
                
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width:768px){
  .content{
    .player{
      .container{
        .row{
          .player-wrapper{

            
          }
        }
      }
    }
  }
}